<template>
  <div>
    <div class="headerbox">
      <div class="headerbox1">
        <div class="name1">{{ res1.title }}</div>
        <div class="kexi">
          <span class="kexi-type1">{{ res1.updata }}</span>
          <span class="kexi-type2">{{ res1.type }}</span>
        </div>
        <div class="hospital">
          <span class="hospital-type">{{ res1.type1 }}</span>
          <span class="hospital-name">{{ res1.type2 }}</span>
        </div>
      </div>
      <div class="headerbox2">
        <img class="touxiang" :src="b" alt="" />
       <button id="btn1" @click="throttle"><span :style="{color:iscolor}">{{isguanzhu}}</span></button>
      </div>
      <div class="headerbox3">
        {{res1.detail}}
      </div>
    </div>
    <div className="serviceinfo">
        <el-icon class="myinco" color="orange" size="30px"><StarFilled /></el-icon>
        <span class="grade">4.98</span>
        <span class="no">
            <span>{{response}}</span>
            月回答</span>
        <span class="no"><span>{{pile}}</span>月处方</span>
    </div>
     <div className="moreinfo">
        <span>{{res1.pingjia}}</span>
        <span>{{res1.pj2}}</span>
        <span>{{res1.pj3}}</span>
        <span>{{res1.pj4}}</span>
        <span>{{res1.pj5}}</span>
    </div>
    <div v-if="isshow" class="motai">{{yesorno}}</div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, toRefs, reactive, onMounted, ref,onUnmounted } from "vue";
//引入防抖节流
import * as _ from 'lodash'

const props=defineProps(["headid"])
//给一张初始化图片
import a from "../../img/mh/empty.png";
let b = ref(a);
// console.log(b.value);

let { proxy }: any = getCurrentInstance();
let res1: any = ref({});

onMounted(async () => {
  let res = await proxy.$axios("/docin", { params: { id: props.headid } });
  res1.value = res.data[0];
  // console.log(res1.value);
  //数据加载到以后，改变图片请求路径
  b.value = proxy.$imgurl + res1.value.img;
});

let response=ref(500)
let pile=ref(99)

let yesorno=ref("关注成功")
let isshow=ref(false)

//判断用户是否关注
let isguanzhu=ref("关注")
let iscolor=ref("#00c792")
// let isdisabled=ref(false)
let isgz=true
 proxy.$axios("/isgz",{params:{did:props.headid}})
.then((data)=>{
    // console.log(data.data[0]);
    if (data.data.length>0) {
      //成立时
      isguanzhu.value="已关注"
      iscolor.value="grey"
      // isdisabled.value=true
      isgz=false
    } 
})


let guanzhu=async ()=>{
  //判断用户是否登录
  let res = await proxy.$axios("/getuserid")
  // console.log(res.data);
  if (res.data==0) {
    alert("你还未登录，请先登录")
    return
  }
  // 更改关注状态

  isgz=!isgz
  if (isgz) {
      // let res1 = await proxy.$axios("/updataisgz",{params:{isgz:0}})
       isshow.value=true
       yesorno.value="取消关注成功"
       //将用户与医生建立关联表
       proxy.$axios("/deleteud",{params:{did:props.headid}})

  }else{
    // let res1 = await proxy.$axios("/updataisgz",{params:{isgz:1}})
      isshow.value=true
       yesorno.value="关注成功"
      //删除用户与医生建立的关联表
      proxy.$axios("/setud",{params:{did:props.headid}})
  }
  setTimeout(() => {
          isshow.value=false
       }, 1500);
  //响应改变样式
  if (isgz==true) {
    isguanzhu.value="关注"
    iscolor.value="#00c792"
  }else{
    isguanzhu.value="已关注"
    iscolor.value="grey"
  }

  

}

  //节流
  const throttle = _.throttle(guanzhu,1500,{
     leading: true,
     trailing: false
   })
   //移除组件时，取消节流
   onUnmounted(()=>{
     throttle.cancel()
   }) 
  


</script>

<style scoped lang="scss">
.headerbox {
     color: #333;
  // width:400px ;
  // height: 400px;
//   background-color: yellow;
  display: flex;
  flex-wrap: wrap;
   padding: 20px 0 10px;

  .headerbox1 {
    width: 700px;
   
    .name1 {
      font-size: 36px;
      font-weight: 600;
      margin-bottom: 32px;
    }
    .kexi {
       
    //   font-size: 14px;
      // .kexi-type1{

      // }
      .kexi-type2 {
        margin-left: 10px;
      }
    }
    .hospital {
      margin: 6px 0;
    //   font-size: 14px;
      .hospital-type {
        background-color: #ebebeb;
        border-radius: 4px;
        padding: 2px;
        color: grey;
        font-size: 14px;
        margin-right: 6px;
      }
    }
  }
  .headerbox2 {
    width: 160px;

    .touxiang{
        width: 80px;
        height: 80px;
        border-radius: 8px;
        // margin-top: 20px;
        position: relative;
        right: -80px;
        display: block;
    }
    #btn1{
    height: 28px;
    margin-top: 10px;
    padding: 0 14px;
    // color: #00c792;
    font-weight: 500;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 13.5px;
    border: none;
    position: relative;
    right: -90px;
    }
  }
  .headerbox3 {
    width: 100%;
    padding: 10px 30px 0 0;
    color: grey;
  }
}
.serviceinfo{
    display: flex;
    // -webkit-box-align: baseline;
    // -webkit-align-items: baseline;
    // -ms-flex-align: baseline;
    align-items: center;
    padding: 20px 0 10px;
    color: #4d4d4d;
    font-weight: 300;
    font-size: 14px;
    // line-height: 1.2;

    .grade{
       margin-right: 20px;
        font-weight: 900;
        // margin-top: 2px;
        color: orange;
        font-size: 20px;
    }
    .myinco{
        margin: -2px 0 0 0;
    }
    .no{
        margin-right: 15px;
        span{
            font-size: 22px;
            font-weight: 700;
        }
    }

}
.moreinfo{
    padding:10px 0 10px;
    span{
            display: inline-block;
    margin-bottom: 6px;
    padding: 2px;
    color: #fa0;
    font-size: 12px;
    // line-height: 1.17;
    background-color: #fffaf0;
    border-radius: 2px;
    margin-right: 6px;
    }
}
.motai{
  width: 120px;
  height: 40px;
  position: fixed;
  background-color: rgba($color: black, $alpha: 0.7);
  color: white;
  z-index: 999;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 200px;
  text-align: center;
  line-height: 40px;
  border-radius: 14px;
}
</style>
